<template>
  <div class="page-table">
    <div class="page-filter">
      <!--      <div class="query">-->
      <!--        <el-form size="mini">-->
      <!--          <ad-datetime-range v-model="searchQuery" @select="search" @search="search"/>-->
      <!--        </el-form>-->
      <!--      </div>-->
      <div class="op">
<!--        <el-button size="mini" type="primary" plain :disabled="cannotCancel" @click="orderCancel">取消订单</el-button>-->
<!--        <el-button size="mini" type="primary" plain :disabled="cannotEdit" @click="orderAdd">完善订单</el-button>-->
        <el-button size="mini" type="primary" plain :disabled="!canComplete" @click="orderEdit({path: '/order/edit/complete', query: {mode: 'complete', ids: orderSelectedRowIds}})">完善订单</el-button>
<!--        <el-button size="mini" type="primary" plain @click="orderAdd('/order/add')">完善订单</el-button>-->
      </div>
    </div>
    <ad-table ref="order" class="multi-select"
              :data="orderList" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table :data-changes-scroll-top="orderIsScrollTop"
              @row-click="orderSelectRow" @selection-change="orderSelectRows"
              :searchQuery="orderSearchQuery" @search="orderGetInitList"
              @sort-change="orderSortInitList" @filter-change="orderFilterInitList"
              @table-body-scroll="orderGetMoreList" :height="tableHeight">
      <ad-table-column type="selection" ctype="selection" fixed/>
      <ad-table-column label="序号" type="index" ctype="index" fixed/>
      <ad-table-column label="客户" prop="createUserName" searchable w="4c1f"/>
      <ad-table-column label="联系电话" prop="createUserPhone" searchable w="4c1f"/>
      <ad-table-column label="数量" prop="carNumber" searchabl w="4c"/>
      <ad-table-column label="车辆名称" prop="carName" searchable w="6c1f"/>
      <ad-table-column label="出发地" prop="startCode" searchable queryPro="startName" ctype="city"/>
      <ad-table-column label="目的地" prop="destinationCode" searchable queryPro="destinationName" ctype="city"/>
      <ad-table-column label="是否需要提车" prop="needPick" dictName="yes_or_no" w="6c"/>
      <ad-table-column label="是否需要送车" prop="needTake" dictName="yes_or_no" w="6c"/>
      <ad-table-column label="提车区域" prop="pickAreaCode">
        <template slot-scope="{row}">{{codeToArea(row.pickAreaCode)}}</template>
      </ad-table-column>
      <ad-table-column label="送车区域" prop="takeAreaCode">
        <template slot-scope="{row}">{{codeToArea(row.takeAreaCode)}}</template>
      </ad-table-column>
      <ad-table-column label="运输费" prop="price" sortable w="3c1f"/>
      <ad-table-column label="下单时间" ctype="datetime" prop="createTime" w="1f" sortable/>
      <ad-table-column label="订单备注" prop="remark" ctype="remark"/>
      <ad-table-column width="auto"/>
    </ad-table>

    <el-dialog title="分配" :visible.sync="orderAdder.visible" custom-class="ad-dialog" width="1000px">
      <adder :mode="orderAdder.mode" :id="orderSelectedRowId" :visible.sync="orderAdder.visible"/>
    </el-dialog>
  </div>
</template>

<script>
import AdDatetimeRange from '@/components/AdDateTimeRange'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import dateRange from '@/utils/dateRange'
import adTable from '@/mixins/adTable/index'
import { getList as orderApiGetList, cancel, getCanComplete } from '@/api/order/complete'
import { getArea as getAllArea } from '@/api/region/allData'

export default {
  name: 'order-complete',
  components: { AdDatetimeRange, AdTable, AdTableColumn },
  dicts: ['order_status','payment_type','yes_or_no'],
  mixins: [adTable([{name: 'order'}])],
  data() {
    return {
      allAreaData: [],
      searchQuery: {
        // beginSearchTime: dateRange.getCurrentDay()[0].getTime(),
        // endSearchTime: dateRange.getCurrentDay()[1].getTime()
      },
      canComplete: false,
      orderDownloading: false,
      tableHeight: document.documentElement.clientHeight - 136,
    }
  },
  created() {
    getAllArea().then(res => this.allAreaData = res.data)
    this.orderGetInitList()
  },
  computed: {
    cannotEdit() {
      const diff = this.orderSelectedRows.map(row => row.updateVersion)
      const canceledOrders = this.orderSelectedRows.filter(row => row.status == -1)
      const cannotEdit = [...new Set(diff)].length != 1 || canceledOrders.length > 0
      return cannotEdit
    },
    cannotCancel() {
      const canceledOrders = this.orderSelectedRows.filter(row => row.status == -1)
      const cannotCancel = this.orderSelectedRows == 0 || canceledOrders.length > 0
      return cannotCancel
    }
  },
  watch: {
    orderSelectedRowIds(ids) {
      if (!ids.length) {
        this.canComplete = false
        return
      } else if (ids.length == 1) {
        this.canComplete = true
        return
      }
      this.canComplete = false
      // getCanComplete({ids}).then(res => {
      //   this.canComplete = res.code === 0
      // })
    }
  },
  methods: { orderApiGetList,
    search(times) {
      this.searchQuery.beginSearchTime = times.beginSearchTime
      this.searchQuery.endSearchTime = times.endSearchTime
      this.orderGetInitList()
    },
    async orderCancel() {
      await this.$confirm('确定要取消订单吗？','取消订单')
      await cancel(this.orderSelectedRowIds)
      this.orderGetInitList()
    },
    detailSaved() {
      this.orderGetInitList()
    },
    codeToArea(code) {
      let areaName = '-'
      const area = this.allAreaData.filter(city => city.code == code)
      if (area && area.length > 0) {
        areaName = area[0].name
      }
      return areaName
    }
  }
}
</script>